<template>
  <div>
    <el-card class="box-card" style="width: 80%; margin: 20px auto">
      <el-table :data="spu.skus" style="width: 100%">
        <el-table-column prop="skuContactName" label="属性组合">
        </el-table-column>
        <el-table-column label="商品名称" prop="skuName">
          <template slot-scope="scope">
            <el-input v-model="scope.row.skuName"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="标题" prop="skuTitle">
          <template slot-scope="scope">
            <el-input v-model="scope.row.skuTitle"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="副标题" prop="skuSubtitle">
          <template slot-scope="scope">
            <el-input v-model="scope.row.skuSubtitle"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="价格" prop="price">
          <template slot-scope="scope">
            <el-input v-model="scope.row.price"></el-input>
          </template>
        </el-table-column>
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-row>
              <el-col :span="24">
                <label style="display: block; float: left">选择图集 或</label>
                <multi-upload
                  style="float: left; margin-left: 10px"
                  :showFile="false"
                  :listType="'text'"
                  v-model="uploadImages"
                ></multi-upload>
              </el-col>
              <el-col :span="24">
                <el-divider></el-divider>
              </el-col>
              <el-col :span="24">
                <el-card
                  style="
                    width: 170px;
                    float: left;
                    margin-left: 15px;
                    margin-top: 15px;
                  "
                  :body-style="{ padding: '0px' }"
                  v-for="(img, index) in spu.images"
                  :key="index"
                >
                  <img :src="img" style="width: 160px; height: 120px" />
                  <div style="padding: 14px">
                    <el-row>
                      <el-col :span="12">
                        <el-checkbox
                          v-model="scope.row.skuImages[index].imgUrl"
                          :true-label="img"
                          false-label
                        ></el-checkbox>
                      </el-col>
                      <el-col :span="12">
                        <el-tag
                          v-if="scope.row.skuImages[index].defaultImg == 1"
                        >
                          <input
                            type="radio"
                            checked
                            :name="scope.row.skuName"
                            @change="checkDefaultImg(scope.row, index, img)"
                          />设为默认
                        </el-tag>
                        <el-tag v-else>
                          <input
                            type="radio"
                            :name="scope.row.skuName"
                            @change="checkDefaultImg(scope.row, index, img)"
                          />设为默认
                        </el-tag>
                      </el-col>
                    </el-row>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <!-- 折扣，满减，会员价 -->
            <!-- <el-form :model="scope.row">
              <el-row> -->
            <!-- <el-col :span="24">
                  <el-form-item label="设置折扣">
                    <label>满</label>
                    <el-input-number
                      style="width: 160px"
                      :min="0"
                      controls-position="right"
                      v-model="scope.row.fullCount"
                    ></el-input-number>
                    <label>件</label>

                    <label style="margin-left: 15px">打</label>
                    <el-input-number
                      style="width: 160px"
                      v-model="scope.row.discount"
                      :precision="2"
                      :max="1"
                      :min="0"
                      :step="0.01"
                      controls-position="right"
                    ></el-input-number>
                    <label>折</label>
                    <el-checkbox
                      v-model="scope.row.countStatus"
                      :true-label="1"
                      :false-label="0"
                      >可叠加优惠</el-checkbox
                    >
                  </el-form-item>
                </el-col> -->
            <!-- <el-col :span="24">
                  <el-form-item label="设置满减">
                    <label>满</label>
                    <el-input-number
                      style="width: 160px"
                      v-model="scope.row.fullPrice"
                      :step="100"
                      :min="0"
                      controls-position="right"
                    ></el-input-number>
                    <label>元</label>
                    <label style="margin-left: 15px">减</label>
                    <el-input-number
                      style="width: 160px"
                      v-model="scope.row.reducePrice"
                      :step="10"
                      :min="0"
                      controls-position="right"
                    ></el-input-number>
                    <label>元</label>
                    <el-checkbox
                      v-model="scope.row.priceStatus"
                      :true-label="1"
                      :false-label="0"
                      >可叠加优惠</el-checkbox
                    >
                  </el-form-item>
                </el-col> -->
            <!-- 
                <el-col :span="24">
                  <el-form-item
                    label="设置会员价"
                    v-if="scope.row.memberPrice.length > 0"
                  >
                    <br />
                    <el-form-item
                      v-for="(mp, mpidx) in scope.row.memberPrice"
                      :key="mp.id"
                    >
                      {{ mp.name }}
                      <el-input-number
                        style="width: 160px"
                        v-model="scope.row.memberPrice[mpidx].price"
                        :precision="2"
                        :min="0"
                        controls-position="right"
                      ></el-input-number>
                    </el-form-item>
                  </el-form-item>
                </el-col> -->
            <!-- </el-row>
            </el-form> -->
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" @click="submitBack">上一步</el-button>
      <el-button type="success" @click="submitSkus"
        >下一步：保存商品信息</el-button
      >
    </el-card>
  </div>
</template>

<script>
import MultiUpload from "@/components/upload/multiUpload";

export default {
  components: { MultiUpload },
  data() {
    return {
      uploadImages: [],
      spu: {
        skus: [],
        images: [],
      },
    };
  },
  methods: {
    init(values) {
      this.spu = values;
    },
    checkDefaultImg(row, index, img) {
      //这个图片被选中了，
      row.skuImages[index].imgUrl = img; //默认选中
      row.skuImages[index].defaultImg = 1; //修改标志位;
      //修改其他人的标志位
      row.skuImages.forEach((item, idx) => {
        if (idx != index) {
          row.skuImages[idx].defaultImg = 0;
        }
      });
    },
    submitBack() {
      this.$emit("backStep", 2);
    },
    submitSkus() {
      this.$emit("submitData", this.spu);
    },
  },
  watch: {
    uploadImages(val) {
      //扩展每个skus里面的imgs选项
      let imgArr = Array.from(new Set(this.spu.images.concat(val)));

      //{imgUrl:"",defaultImg:0} 由于concat每次迭代上次，有很多重复。
      //所以我们必须得到上次 + 这次的总长

      this.spu.skus.forEach((item, index) => {
        //还差这么多
        let len = imgArr.length - this.spu.skus[index].skuImages.length;
        if (len > 0) {
          let imgs = new Array(len);
          imgs = imgs.fill({ imgUrl: "", defaultImg: 0 });
          this.spu.skus[index].skuImages = item.skuImages.concat(imgs);
        }
      });

      this.spu.images = imgArr; //去重
      // console.log("this.spu.skus", this.spu.skus);
    },
  },
};
</script>
